<style lang="less">
    @import '../../../../styles/common.less';
    @import '../../../my_components/image-editor/image-editor.less';
</style>
<template>
    <div class="image-editor">
        <Row :gutter="10">
            <Col span="15" offset="2">
                <Card>
                    <p slot="title">
                        <Icon type="ios-cloud-upload"></Icon>
                        上传轮播
                    </p>
                    <Row :gutter="10">
                        <Col span="11" class="image-editor-con1">
                        <div class="cropper">
                            <img id="cropimg1" alt="">
                        </div>
                        </Col>
                        <Col span="8" class="image-editor-con1">
                        <Row type="flex" justify="center" align="middle" class="image-editor-con1-preview-con">
                            <div id="preview1"></div>
                        </Row>
                        <div class="image-editor-con1-btn-con margin-top-10">
                            <input type="file" accept="image/png, image/jpeg, image/gif, image/jpg" @change="handleChange1" id="fileinput1" class="fileinput" />
                            <div class="margin-top-10" style="text-align: center;">
                                <label class="filelabel" for="fileinput1" style="margin: 10px 0px;"><Icon type="image"></Icon>&nbsp;选择图片</label>
                                <ButtonGroup>
                                    <Button @click="cropper1.rotate(-90)" type="primary"><Icon :size="14" type="arrow-return-left"></Icon></Button>
                                    <Button @click="cropper1.rotate(90)" type="primary"><Icon :size="14" type="arrow-return-right"></Icon></Button>
                                    <Button @click="cropper1.zoom(0.1)" type="primary"><Icon :size="14" type="plus-round"></Icon></Button>
                                    <Button @click="cropper1.zoom(-0.1)" type="primary"><Icon :size="14" type="minus-round"></Icon></Button>
                                    <Button @click="cropper1.scaleX(-cropper2.getData().scaleX)" type="primary"><Icon :size="14" type="android-more-horizontal"></Icon></Button>
                                    <Button @click="cropper1.scaleY(-cropper2.getData().scaleY)" type="primary"><Icon :size="14" type="android-more-vertical"></Icon></Button>
                                    <Button @click="handlecrop1" type="primary" icon="crop">裁剪</Button>
                                </ButtonGroup>
                            </div>
                        </div>
                        <Modal v-model="option1.showCropedImage">
                            <p slot="header">预览裁剪之后的图片</p>
                            <img :src="option1.cropedImg" alt="" v-if="option1.showCropedImage" style="width: 100%;">
                        </Modal>
                        </Col>
                        <Col span="5" class="image-editor-con2">
                        <p><b>x:</b>{{ cropdata1.x }}</p>
                        <p><b>y:</b>{{ cropdata1.y }}</p>
                        <p><b>width:</b>{{ cropdata1.w }}</p>
                        <p><b>heigh:</b>{{ cropdata1.h }}</p>
                        <p><b>deg:</b>{{ cropdata1.deg }}</p>
                        <p><b>scaleX:</b>{{ cropdata1.scaleX }}</p>
                        <p><b>scaleY:</b>{{ cropdata1.scaleY }}</p>
                        </Col>
                    </Row>
                </Card>
            </Col>
            <Col span="5">
                <Card>
                    <p slot="title">
                        <Icon type="information-circled"></Icon>
                        轮播图信息
                    </p>
                    <Form ref="bannerModel" :model="bannerModel" :rules="ruleValidate" :label-width="100">
                        <FormItem label="权重" prop="sort">
                            <InputNumber :max="20" :min="1" v-model="bannerModel.sort"  placeholder="请输入权重(及排序顺序)"></InputNumber>
                        </FormItem>
                        <FormItem label="描述" prop="title">
                            <Input v-model="bannerModel.title" placeholder="请输入描述" />
                        </FormItem>
                        <FormItem label="跳转URL" prop="target">
                            <Input v-model="bannerModel.target" placeholder="请输入跳转URL" />
                        </FormItem>
                        <FormItem label="分组" prop="group">
                            <Select v-model="bannerModel.group" style="width:100px">
                                <Option v-for="item in groupList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
    import Cropper from 'cropperjs';
    import md5 from 'js-md5';
    export default {
        data () {
            return {
                //图片裁剪
                cropper1: {},
                addorUpURl:'/banner/saveoredit',
                cropdata1: {
                    x: '',
                    y: '',
                    w: '',
                    h: '',
                    deg: '',
                    scaleX: '',
                    scaleY: ''
                },
                option1: {
                    showCropedImage: false,
                    cropedImg: ''
                },
                bannerModel:{},
                groupList:[
                    {
                        value: 1,
                        label: '启动页'
                    },
                    {
                        value: 2,
                        label: '首页轮播'
                    },
                    {
                        value: 3,
                        label: '充值页面'
                    },
                    {
                        value: 4,
                        label: '广告位'
                    }
                ],
                ruleValidate: {
                    title: [
                        { required: true, message: '请输入描述', trigger: 'blur' },
                    ],
                    target: [
                        { required: true, message: '请输入跳转URL', trigger: 'blur' },
                    ]
                },
            }
        },
        created () {
        },
        methods: {
            //图片改变
            handleChange1 (e) {
                let file = e.target.files[0];
                //将图片转换成base64格式
                let reader = new FileReader();
                reader.onload = () => {
                    this.cropper1.replace(reader.result);
                    reader.onload = null;
                };
                reader.readAsDataURL(file);
            },
            //裁剪按钮
            handlecrop1 (e) {
                let self = this;
                let file = self.cropper1.getCroppedCanvas().toDataURL();
                self.option1.cropedImg = file;
                //长和宽比例 2:1 误差5px 以内就上传 否则失败
                if(((self.cropdata1.w - 2*self.cropdata1.h)>=0 && (self.cropdata1.w - 2*self.cropdata1.h)<=5) || ((2*self.cropdata1.h-self.cropdata1.w)>=0 && (2*self.cropdata1.h-self.cropdata1.w)<=5)) {
                    let fd = new FormData();
                    let blob = self.dataURItoBlob(file);
                    fd.append('file', blob,'QQ图片20171207195122.jpg');
                    fd.append('chunk', '0');
                    let config = {
                        headers: {
                            'Content-Type': 'multipart/form-data',
                            'processData': 'false',
                            'contentType': 'false'
                        }
                    };  //添加请求头
                    self.$axios.post('http://115.28.157.85:9898/upload/wgj/img', fd, config).then(response => {
                        self.bannerModel.imgUrl = response.data[0].filePath;
                        self.option1.showCropedImage = true;
                    });
                }else{
                    self.error("裁剪图片的宽和高的比例必须为2:1。否则轮播页面图片会变形！！！");
                }

            },
            //base64 转 二进制文件
            dataURItoBlob(dataURI) {
                var byteString = atob(dataURI.split(',')[1]);
                var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
                var ab = new ArrayBuffer(byteString.length);
                var ia = new Uint8Array(ab);
                for (var i = 0; i < byteString.length; i++) {
                    ia[i] = byteString.charCodeAt(i);
                }
                return new Blob([ab], {type:mimeString});
            },
            //表单提交
            handleSubmit (name) {
                let self=this;
                if (self.bannerModel.imgUrl !=null && self.bannerModel.imgUrl != ""){
                    self.$axios.post(self.addorUpURl,self.bannerModel).then((res) => {
                        if (res.data.code==200){
                            self.$Message.success('恭喜您，修改成功');
                        }else {
                            self.$Message.error('抱歉，修改失败。请稍后重试!');
                        }
                    });
                }else {
                    self.error("裁剪图片不符合。请重新裁剪，再进行提交！！！");
                }

            },
            //表单重置
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            //错误提醒
            error (nodesc) {
                this.$Notice.error({
                    title: '错误通知',
                    desc: nodesc
                });
            }
        },
        mounted () {
            let img1 = document.getElementById('cropimg1');
            this.cropper1 = new Cropper(img1, {
                dragMode: 'move',
                preview: '#preview1',
                restore: false,
                center: false,
                highlight: false,
                cropBoxMovable: false,
                toggleDragModeOnDblclick: false
            });
            img1.addEventListener('crop', (e) => {
                this.cropdata1.x = parseInt(e.detail.x);
                this.cropdata1.y = parseInt(e.detail.y);
                this.cropdata1.w = parseInt(e.detail.width);
                this.cropdata1.h = parseInt(e.detail.height);
                this.cropdata1.deg = parseInt(e.detail.rotate);
                this.cropdata1.scaleX = parseInt(e.detail.scaleX);
                this.cropdata1.scaleY = parseInt(e.detail.scaleY);
            });

        }
    }
</script>